﻿/* Move down content because we have a fixed navbar that is 50px tall */
.DefBdy {
    padding-right: 0px;
    margin-right: 0px;
    overflow-x: hidden;
}

.bodyLogin {
    padding-top: 0px;
    padding-bottom: 0px;
   
    background-position: center; /* Center the image */
    background-repeat: no-repeat; /* Do not repeat the image */
   
   
}


/* Wrapping element */
/* Set some basic padding to keep content from hitting the edges */
.body-content {
    padding-left: 2px;
    padding-right: 2px;
}

.borderShadow {
    border: 0px solid;
    box-shadow: 5px 10px 8px #888888;
    width: auto;
    margin-left: 20px;
}

/* Box for the Login page */

.form {
    position: relative;
    z-index: 1;
   
    max-width: 450px;
    margin: 100px  auto 100px;
    padding: 45px;
    text-align: center;
    box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
  
}


/* Set widths on the form inputs since otherwise they're 100% wide */
input,
select,
textarea,text {
    max-width: 280px;
    border-radius: 5px;
}

.button {
    background-color:dimgray;
    border: none;
    color: white;
    padding: 10px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 14px;
    margin: 4px 2px;
    cursor: pointer;
    border-radius:15px;
}

.button1 {
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}

/* Opacity #1 */
.hover11 figure img {
    opacity: 1;
    -webkit-transition: .3s ease-in-out;
    transition: .3s ease-in-out;
}

.hover11 figure:hover img {
    opacity: .5;
}

.column {
    margin: 15px 15px 0;
    padding: 0;
}

    .column:last-child {
        padding-bottom: 60px;
    }

    .column::after {
        content: '';
        clear: both;
        display: block;
    }

    .column div {
        position: relative;
        float: left;
        width: 300px;
        height: 200px;
        margin: 0 0 0 25px;
        padding: 0;
    }

        .column div:first-child {
            margin-left: 0;
        }

        .column div span {
            position: absolute;
            bottom: -20px;
            left: 0;
            z-index: -1;
            display: block;
            width: 300px;
            margin: 0;
            padding: 0;
            color: #444;
            font-size: 18px;
            text-decoration: none;
            text-align: center;
            -webkit-transition: .3s ease-in-out;
            transition: .3s ease-in-out;
            opacity: 0;
        }

/* Responsive: Portrait tablets and up */
@media screen and (min-width: 768px) {
    .jumbotron {
        margin-top: 20px;
    }

   

    .clear { /* This class is to keep spaces between datalist column */
        padding-left: 5px;
        padding-right: 5px;
        padding-bottom: 5px;
    }

}
